<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/* 过渡属性控制动画速度 */
			/* 过渡三要素 过渡属性 过渡效果曲线 过渡持续时间  */
			/* 设置过渡属性名称 */
			/* transition-property:width,background-color; */
			/* 设置过渡持续时间 */
			/* transition-duration: 2s; */
			/* 设置过渡速度曲线  linear 线性过渡*/
			/* transition-timing-function: linear,ease-in-out; */
			/* 设置过渡等待时长 0s代表过渡立马生效  */
			/* transition-delay:0s; */
			/*过渡属性简写形式 property duration timeing-function delay*/
			transition:width 2s linear 0s,background-color 1s ease-out 0s;
		}
		div:hover{
			width: 200px;
			background-color: blue;
		}
		img{
			width: 150px;
			transition: width 2s linear 0s;
		}
		img:hover{
			width: 250px;
		}
	</style>
</head>
<body>
	<div></div>
	<img src="../images/ad12.jpg" alt="">
</body>
</html>